<template>
  <div id="goodsActivity">
    <h1 class="con-right-title">商品活动管理</h1>
    <topSearch @toSearch="toSearch"></topSearch>
    <div class="table-conBtn">
      <el-button
        v-permission="'wh:goodsActivity:create'"
        type="warning"
        icon="el-icon-plus"
        @click="addActives('add')"
      >
        新增活动
      </el-button>
      <freshCom @searchList="searchList"></freshCom>
    </div>
    <!-- 表格部分 -->
    <el-table v-loading="loading" :data="tableData" max-height="490">
      <el-table-column type="index" width="80" label="序号" align="center">
      </el-table-column>
      <el-table-column
        label="活动编号"
        prop="activityNum"
        min-width="100"
        align="center"
      ></el-table-column>
      <el-table-column
        label="活动名称"
        prop="name"
        min-width="100"
        align="center"
      ></el-table-column>
      <el-table-column label="活动类型" min-width="100" align="center">
        <template slot-scope="{ row }">
          <span v-if="row.activityType">
            {{ row.activityType | filterName('activity_course_type') }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="活动时间" min-width="120" align="center">
        <template slot-scope="{ row }">
          <div>{{ row.activityStartTime }}</div>
          <div>至</div>
          <div v-if="row.activityTimeData.activityTimeType === 'LONG_TERM'">
            长期有效
          </div>
          <div v-else>{{ row.activityEndTime }}</div>
        </template>
      </el-table-column>
      <el-table-column label="赠送商品" min-width="160" align="center">
        <template slot-scope="{ row }">
          <span v-for="(item, index) of row.courseNames" :key="index">
            {{ item.name }}<br />
          </span>
        </template>
      </el-table-column>
      <el-table-column label="参与/发放用户" min-width="90" align="center">
        <template slot-scope="{ row }">
          <span>
            {{
              row.activityUserRangeConfig.userRangeType
                | filterName('activity_course_user_type')
            }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="活动状态" min-width="90" align="center">
        <template slot-scope="{ row }">
          <span>
            {{ row.activityStatus | filterName('activity_course_status') }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        label="创建时间"
        prop="createdTime"
        min-width="120"
        align="center"
      ></el-table-column>
      <el-table-column
        label="实际结束时间"
        prop="actualEndTime"
        min-width="110"
        align="center"
      >
        <template slot-scope="{ row }">
          <span>{{ row.actualEndTime || '——' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="135" align="center">
        <template slot-scope="{ row }">
          <el-button
            type="text"
            v-permission="'wh:goodsActivity:status'"
            @click="handleAction('start', row)"
            v-if="row.activityStatus === 'NOT_STARTED'"
          >
            启用
          </el-button>
          <el-button
            type="text"
            v-permission="'wh:goodsActivity:status'"
            @click="handleAction('end', row)"
            v-if="row.activityStatus === 'IN_PROGRESS'"
          >
            结束
          </el-button>
          <el-button
            type="text"
            v-permission="'wh:goodsActivity:edit'"
            @click="addActives('edit', row)"
            v-if="
              row.activityStatus === 'IN_PROGRESS' ||
                row.activityStatus === 'NOT_STARTED'
            "
          >
            编辑
          </el-button>
          <el-button
            type="text"
            @click="handleAction('delete', row)"
            v-if="row.activityStatus === 'NOT_STARTED'"
            v-permission="'wh:goodsActivity:delete'"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="更多" width="200" align="center">
        <template slot-scope="{ row }">
          <el-button
            type="text"
            v-permission="'wh:goodsActivity:view'"
            @click="handleAction('details', row)"
          >
            详情
          </el-button>
          <el-button
            type="text"
            v-permission="'wh:goodsActivity:receiveRecord'"
            @click="handleAction('receiveHistory', row)"
          >
            领取记录
          </el-button>
          <el-button
            type="text"
            v-permission="'wh:goodsActivity:viewData'"
            @click="handleAction('statistics', row)"
          >
            数据
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-全局组件-->
    <pageCom
      :searchParams="searchParams"
      :total="total"
      @searchList="searchList"
    ></pageCom>
    <!-- 查看数据弹窗 -->
    <viewData
      v-if="formViewData.isShow"
      :formViewData="formViewData"
    ></viewData>
    <!-- 点击详情右侧抽屉 -->
    <drawer
      v-if="drawFormInline.drawer"
      :drawFormInline="drawFormInline"
    ></drawer>
  </div>
</template>

<script>
import topSearch from './topSearch' // 上部搜索条件
import viewData from './viewData' //点击数据弹窗
import drawer from './drawer' //右侧抽屉
import {
  getGivingCoursesList, // 赠课商品活动列表
  stopGivingCourses, // 立即结束赠课
  deleteGivingCourses, // 根据活动id删除赠课活动
  getGivingCoursesDetail, // 根据活动id查询赠课活动详情
  startGivingCourses //启用活动
} from '@/api/activityCenter/activityManage/giveLessons'
import { sysNormalDisable } from '@utils/dictionariesFunc'

export default {
  components: { topSearch, viewData, drawer },
  data() {
    return {
      loading: false,
      tableData: [],
      total: 0,
      searchParams: {
        pageNum: 1,
        pageSize: 10
      },
      formViewData: { isShow: false },
      drawFormInline: { drawer: false }
    }
  },
  async mounted() {
    this.searchList()
    await sysNormalDisable(
      'activity_course_user_type',
      'activity_course_user_type'
    )
  },
  methods: {
    /* 列表 */
    searchList() {
      this.loading = true
      getGivingCoursesList(
        this.searchParams,
        (res) => {
          this.loading = false
          this.tableData = res.rows
          this.total = res.total
        },
        () => {
          this.loading = false
        }
      )
    },
    /* 搜索 */
    toSearch(val) {
      this.searchParams.pageNum = 1
      Object.assign(this.searchParams, val)
      this.searchList()
    },
    /* 新增 */
    addActives(type, row) {
      let obj = {
        name: 'wh:giveLessons:edit',
        query: { type }
      }
      if (type === 'add') {
        this.$router.push(obj)
      } else {
        obj.query.id = row.id
        this.$router.push(obj)
      }
    },
    /* 操作按钮 */
    handleAction(type, params) {
      if (type === 'statistics') {
        // 查看数据
        this.formViewData = { isShow: true, params }
      } else if (type === 'details') {
        // 查看详情
        getGivingCoursesDetail(params.id, {}, (res) => {
          this.drawFormInline.dranData = res
          this.drawFormInline.drawer = true
        })
      } else if (type === 'receiveHistory') {
        // 领取记录
        this.$router.push({
          name: 'wh:giveLessons:receiveRecord',
          query: { id: params.id, name: params.name }
        })
      } else if (type === 'start') {
        //点击启用时 弹窗
        this.$confirm('启用后可立即参与活动，是否立即启用活动？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            startGivingCourses(params.id, {}, () => {
              this.$message.success('活动启用成功')
              this.searchList()
            })
          })
          .catch(() => {})
      } else if (type === 'delete') {
        //点击删除时的弹窗
        this.$confirm('删除后无法自动启用及查看，是否确认删除？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            deleteGivingCourses(params.id, {}, () => {
              this.searchList()
            })
          })
          .catch(() => {})
      } else if (type === 'end') {
        //点击结束时的弹窗
        this.$confirm('结束后将立即不可参与活动，是否立即结束活动？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            stopGivingCourses(params.id, {}, () => {
              this.$message.success('活动已结束成功')
              this.searchList()
            })
          })
          .catch(() => {})
      }
    }
  }
}
</script>

<style lang="less"></style>
